<template>
  <div class="float-box" :class="floatBoxClass">
    <components v-if="show" :is="components" :content="content" :promise="promise"></components>
  </div>
</template>

<script>
import FloatBoxAlert from './FloatBoxAlert.vue';
import FloatBoxConfirm from './FloatBoxConfirm.vue';

export default {
  name: 'floatBox',
  components:{
    "float-box-alert":FloatBoxAlert,
    "float-box-confirm":FloatBoxConfirm
  },
  computed: {
    floatBoxClass(){
      return{
        show:this.show,
        model:this.$store.state.floatBox.model
      }
    },
    show(){
      return this.$store.state.floatBox.show
    },
    components(){
      return this.$store.state.floatBox.type;
    },
    content(){
      return this.$store.state.floatBox.content;
    },
    promise(){
      return this.$store.state.floatBox.promise;
    }
  },
  methods:{
    showAlert(text){
      this.$store.dispatch('alert', text);
    }
  },
  created(){
    //window.alert=this.showAlert;
  }
};
</script>

<style lang="less">
.float-box {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 9999;
  transition: .5s;
  visibility: hidden;
  pointer-events: none;
  &.show {
    visibility: visible;
    pointer-events: all;
    &.model:before {
      visibility: visible;
      opacity: 1;
      pointer-events: all;
    }
  }
  &:before {
    content: ' ';
    display: block;
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    background: rgba(0, 0, 0, 0.5);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: .5s;
  }
}

.float-box-alert,.float-box-confirm {
  box-sizing: border-box;
  position: absolute;
  max-width: 480px;
  left: 50%;
  bottom: 50%;
  padding: 24px;
  background: rgba(255,255,255,.9);
  text-align: center;
  box-shadow: 0 4px 20px rgba(0,0,0,0.5);
  transform: translateX(-50%)  translateY(25%);
  .content{
    display: inline-block;
    min-height: 48px;
    padding-bottom: 32px;
    color: #666;
    font-size: 16px;
    text-align: left;
  }
}
</style>